<template>
    <div id="app">
        <ul-li :filelist="filelist"></ul-li>
        <button @click="show = !show">切换展示</button>
        <transition name="fade"
            enter-active-class="animated tada"
            leave-active-class="animated bounceOutRight"
        >
            <p v-show="show">切换显示</p>
        </transition>
        <input type="text" v-focus>
        <button @click="add">add</button>
        <button v-buy>购物车</button>
    </div>
</template>

<script>
import ulLi from '@/ul-li'
export default {
    components:{
        ulLi    
    },
    created(){
        this.$http.get('/api/filelist').then((res) => {
            console.log(res)
            if(res.data.code === 1){
                this.filelist = res.data.data;
                console.log(this.filelist)
            }
        }).catch((error) => {
            console.warn(error)
        })
    },
    data(){
        return {
            filelist:[],
            show:true,
            buyList:[]
        }
    },
    directives:{
        focus:{
            inserted:function(el){
                el.focus()
            }
        },
        buy:{
            update(el,binding,vnode){
                if(vnode.context.buyList.length){
                    el.style.backgroundColor="red";
                }else{
                    el.style.backgroundColor="gray";
                }
            }
        }
    },
    methods:{
        add(){
            this.buyList.push({title:"标题一"})
        }
    }
}
</script>

<style>
@import './assets/font/iconfont';
@import './assets/animate';
.red{
    color:red;
}

.fade-enter,.fade-leave-to{
    opacity: 0;
}
.fade-enter-to,.fade-leave{
    opacity: 1;
}

/* .fade-enter-active,.fade-leave-active{
    transition: opacity .5s; 
} */
.fade-enter-active{
    animation: bounce-in .5s;
}

.fade-leave-active{
    animation: bounce-in 1s reverse;
}

@keyframes bounce-in{
    0%{
        opacity: 0;
        transform:scale(0);
    }
    50%{
        opacity: 0.5;
        transform:scale(1.5);
    }
    100%{
        opacity: 1;
        transform:scale(1);
    }
}
</style>


